<template>
  <MyVanskeleton :row="3" :loading="loading">
    <template v-slot:my-content>
      <div class="jobInfo">
				<!-- share, hide for check of huawei -->
        <!-- <NavShareBarVue :title="title" :onShare="onShare" /> -->
				<van-nav-bar  :title="title" fixed left-arrow @click-left="$router.back()"  />
        <!-- 内容 -->
        <div class="content-top">
          <!-- 职位详情 start -->
          <div class="box">
            <!-- 简介 -->
            <div class="basic">
              <b>{{ jobinfo.stationName }}</b>
              <b>{{ jobinfo.salaryFormat }}</b>
              <p>
                <span>{{ jobinfo.workAddressValue2 }}</span>
                <span>{{ jobinfo.edu_LevelValue }}</span>
                <span>{{ jobinfo.workYearsValue }}</span>
                <span>{{ jobinfo.jobType }}</span>
              </p>
              <p>
                <span>{{ jobinfo.publishDateFormat }}</span>
                <span>{{ jobinfo.station_Click }}</span>
              </p>
            </div>

            <!-- 福利 -->
            <template v-if="jobinfo.welfaresTxtArr">
              <div class="title">
                <b>职位福利</b>
              </div>
              <div class="weal">
                <span v-for="item in jobinfo.welfaresTxtArr" :key="item">{{item}}</span>
              </div>
            </template>

            <!-- 描述 -->
            <div class="title">
              <b>职位描述</b>
            </div>
            <div class="describe">
              <span v-html="jobinfo.station_Text"></span>
            </div>
          </div>
          <!-- 职位详情 end -->

          <!-- 防骗警告 start -->
          <div class="box hint">
            <van-icon name="warning" size="22" color="#ff6060" />
            <!-- for 举报 -->
            <p @click="onJobReport"> 
              <span>如遇无效、虚假、诈骗信息，请点击此处反馈</span>
              <span>求职过程请勿缴纳费用，谨防诈骗！</span>
            </p>
            <!-- <p>
              <span>求职过程请勿缴纳费用，谨防诈骗！</span>
            </p> -->
          </div>
          <!-- 防骗警告 end -->

          <!-- 公司信息 start -->
          <div class="box">
            <div class="title">
              <b>公司信息</b>
            </div>
            <div class="company" @click="onCompanyClick(companyinfo.companyID)">
              <img :src="companyinfo.logoUrl" alt="" v-if="companyinfo.logoUrl != ''" />
              <img src="@/assets/img/firm_default_avatar.png" alt="" v-else />
              <p>
                <b>{{ companyinfo.companyName }}</b>
                <em v-if="jobinfo.isRZ == 1">认证</em>
              </p>
              <p>
                <span>{{ companyinfo.quality }}</span>
                <i></i>
                <span>{{ companyinfo.trade }}</span>
              </p>
            </div>
            <div class="company-quiz" v-if="false">
              <a>我要提问</a>
            </div>
          </div>
          <!-- 公司信息 end -->

          <!-- 相似职位 start -->
          <div class="box" v-if="likeJobs.length > 0">
            <div class="title">
              <b>相似职位</b>
            </div>
            <div class="similar">
              <div class="item" v-for="(item, index) in likeJobs" :key="index" @click="onJobClick(item.stationID_Main)">
                <p>
                  <b>{{ item.stationName }}</b>
                  <b>{{ item.salaryFormat }}</b>
                </p>
                <p>
                  <span>{{ item.workAddressValue2 }} | {{ item.edu_LevelValue }} |
                    {{ item.workYearsValue }}</span>
                </p>
                <p>
                  <span>{{ item.companyName }}</span>
	<span v-if="item.isRZ == 1">认证</span>
                </p>
              </div>

              <div class="btn" v-show="show_likeJobs_next == true" @click="getJobLike">
                <a>换一换</a>
              </div>
            </div>
          </div>
          <!-- 相似职位 end -->
        </div>

        <!-- 底部置顶操作 -->
        <div class="operate">
          <p @click="onCollectClick">
            <van-icon name="star" size="22" color="#05A6F0" v-if="isCollect === true" />
            <van-icon name="star-o" size="23" color="#888" v-else />
            <span>收藏</span>
          </p>
          <p v-if="tel != ''">
            <van-icon name="phone-o" size="23" color="#888" @click="toCall(tel)" /><span>电话</span>
          </p>
          <van-button class="chat-btn" plain hairline round type="primary" @click="onIM(companyinfo.companyID)">和TA聊聊</van-button>
          <van-button class="deliver-btn" type="primary" :loading="loding_apply" @click="onApplyJob">投递简历</van-button>
        </div>
      </div>
    </template>
  </MyVanskeleton>
</template>

<script>
import { Dialog, Icon, Button, Toast,NavBar } from "vant";
import {
  PersonLoginedApplyJob,
  PersonLoginedGetCompanyTel,
} from "@/util/http";
import MyVanskeleton from "@/components/MyVanskeleton.vue";

import { checkPersonLogin, getPersonID } from "@/util/session";

import {
  mixin_person_toJobCompany,
  mixin_person_tologin,
  mixin_person_toIM,
  mixin_call,
} from "@/mixin/mixins";

import Global from "@/Global";

import { returnToPhoneWithData } from "@/util/phone";
import NavShareBarVue from "@/components/NavShareBar.vue";

export default {
  name: "JobInfo",
  components: {
		[NavBar.name]: NavBar,
    NavShareBarVue,
    MyVanskeleton,
    [Dialog.name]: Dialog,
    [Icon.name]: Icon,
    [Button.name]: Button,
  },
  mixins: [
    mixin_person_toJobCompany,
    mixin_person_tologin,
    mixin_person_toIM,
    mixin_call,
  ],
  // 定义属性
  data() {
    return {
      title: "title",
      loading: true,
      jobid: "",
      jobinfo: {},
      companyinfo: {},
      likeJobs: [], //相似职位
      page_likeJobs: 0, //相似职位
      show_likeJobs_next: false, //相似职位，是否显示换一换
      isCollect: false, //是否收藏

      loding_apply: false, //是否正在投递
      tel: "",

      list_refuse_company: [],
      is_refuse: false,
    };
  },
  mounted() {
    this.jobid = this.$route.query.jobid;
    this.getJobInfo();
    if(getPersonID() != ''){
      returnToPhoneWithData({
        action: "show_appstore_comment"
      });
    }
    // if (checkPersonLogin()) {
    //   PersonCheckIsCollectJob(this.jobid).then((res) => {
    //     if (res === 1) {
    //       this.isCollect = true;
    //     }
    //   });
    // }
  },
  activated() {
    //获取屏蔽企业
    // if (checkPersonLogin()) {
    //   PersonLoginedGetRefuseCompanyList().then((res) => {
    //     this.list_refuse_company = res;
    //   });
    // }
  },
  watch: {
    list_refuse_company() {
      let jobid = this.jobid;
      let arr = this.list_refuse_company.filter((i) => {
        return jobid.indexOf(i.itemID) >= 0;
      });
      this.is_refuse = arr.length > 0;
    },
    is_refuse() {
      if (this.is_refuse) {
        Dialog.confirm({
          message: "检测到屏蔽了该企业！",
          confirmButtonText: "解除屏蔽",
          cancelButtonText: "离开",
        })
          .then(() => {
            let jobid = this.jobid;
            let companyid = jobid.substring(0, 6);
            PersonLoginedDelRefuseCompany(companyid).then((res) => {
              Toast(res.msg);
              if (res.result != 1) {
                this.$router.go(-1);
              }
            });
          })
          .catch(() => {
            // on cancel
            this.$router.go(-1);
          });
      }
    },
  },
  // 方法集合
  methods: {
    //职位详情
    getJobInfo() {
      let params = { stationID: this.jobid, personID: getPersonID() };
      this.$api.get("/PersonStation/GetStationInfo", params).then((res) => {
        this.loading = false;
        if (res.success) {
          this.title = res.response.stationName;
          document.title = this.title;
          this.jobinfo = res.response;
          this.companyinfo = res.response.companyInfo;
          this.getJobLike();
          this.isCollect = res.response.isCollect == 0 ? false : true
          // this.getTel();
        }
      });
    },
    //相似职位
    async getJobLike() {
      this.page_likeJobs++;
      await this.$api.get('/PersonStation/GetAlikeStationPageList', { pageIndex: this.page_likeJobs, pageSize: 5, stationName: this.title }).then(res => {
        if (res.success) {
          var list = res.response;
          this.show_likeJobs_next = list.length > 0
          //翻页后无数据
          if (list.length == 0 && this.page_likeJobs > 1) {
            this.page_likeJobs = 0;
            this.getJobLike();
          }
          else {
            this.likeJobs = list;
          }
        }
      })
    },
    //举报
    onJobReport() {
      this.$router.push({
        name: "person-job-report",
        params: { jobid: this.jobinfo.stationID_Main, jobname: this.jobinfo.stationName },
      });
    },
    //收藏、取消收藏
    onCollectClick() {
      if (!checkPersonLogin()) {
        this.onToLogin();
        return;
      }
      this.$api.get('/PersonStation/CollectStation', { stationID: this.jobid, flag: (this.isCollect ? 0 : 1) }).then(res => {
        if (res.success) {
          this.isCollect = !this.isCollect
					this.$bus.$emit(Global.bus_person_mine_update);
        }
        else {
          Toast(res.msg);
        }
      })
    },
    //投递职位
    onApplyJob() {
      if (!checkPersonLogin()) {
        this.onToLogin();
        return;
      }
      Dialog.confirm({ message: "确认投递该职位？", confirmButtonText: "投递" }).then(() => {
        this.loding_apply = true;
        this.$api.post("/PersonStation/ApplyStation", [this.jobid]).then((res) => {
          this.loding_apply = false;
          if (res.success) {
            Toast.success('投递成功');
            this.getTel();
						this.$bus.$emit(Global.bus_person_resume_update);
          }
          else { Toast.fail(res.msg) }
        });
      }).catch(() => {
        // on cancel
      });
    },
    getTel() {
      if (!checkPersonLogin()) {
        return;
      }
      PersonLoginedGetCompanyTel(this.companyinfo.companyid).then((res) => {
        // console.log(res);
        this.tel = res;
      });
    },
    onShare() {
      // console.log(this.jobinfo);
      let title = this.jobinfo.stationName;
      if (this.jobinfo.salaryFormat != "") {
        title += ` ${this.jobinfo.salaryFormat}，强烈推荐`;
      } else {
        title += "，强烈推荐";
      }
      let content = "";
      if (this.jobinfo.welfaresTxtArr && this.jobinfo.welfaresTxtArr.length > 0) {
        content = this.jobinfo.welfaresTxtArr.join(" | ");
      } else {
        content = "找工作，就上舟山人才网（93job.com）";
      }
      returnToPhoneWithData({
        action: "share",
        title,
        content,
        url: Global.share_person_url + `/Q/StationInfo.aspx?StationID=${this.jobid}`,
      });
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "vant/lib/dialog/index.less";
@import "@/assets/css/common.less";

/* 置底操作 */
.jobInfo .operate {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 333;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 10px 20px;
  border-top: 0.5px solid #ddd;
  background-color: #fff;
}

.jobInfo .operate p {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 40px;
  margin-right: 15px;
}

.jobInfo .operate p span {
  display: flex;
  align-items: center;
  font-size: 10px;
  color: #666;
  line-height: 10px;
}

.jobInfo .operate button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 40px;
  padding: 0;
  border-radius: 40px;
  font-size: 16px;
  line-height: 40px;
}

.jobInfo .operate button.chat-btn {
  border-color: rgba(5, 166, 240, 0.3);
  background-color: rgba(5, 166, 240, 0.05);
  color: #05A6F0;
}

.jobInfo .operate button.deliver-btn {
  margin-left: 15px;
  border-color: #05A6F0;
  background-color: #05A6F0;
  color: #fff;
}

/* 通用 */
.jobInfo .box {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  background-color: #fff;
}

.jobInfo .box + .box {
  margin-top: 10px;
}

.jobInfo .box.hint {
  flex-direction: row;
  align-items: center;
  padding: 10px 20px;
  margin-top: 0;
  background-color: #fff7e0;
}

.jobInfo .box.hint p {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10px;
}

.jobInfo .box.hint p span {
  font-size: 14px;
  color: #ff3030;
}

.jobInfo .box .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
}

.jobInfo .box .title b {
  font-size: 16px;
  color: #333;
}

.jobInfo .box .title a {
  display: flex;
  align-items: center;
  height: 24px;
  font-size: 12px;
  color: #666;
}

.jobInfo .box .title a i {
  margin-right: 4px;
}

/* 职位简介 */
.jobInfo .basic {
  display: flex;
  flex-direction: column;
  padding: 20px 0 15px;
  border-bottom: 0.5px solid #e8e8e8;
}

.jobInfo .basic b:nth-child(1) {
  font-size: 22px;
  color: #000;
}

.jobInfo .basic b:nth-child(2) {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #f44;
}

.jobInfo .basic p:nth-of-type(1) {
  display: flex;
  margin: 16px 0 20px;
}

.jobInfo .basic p:nth-of-type(1) span {
  height: 19px;
  padding-left: 18px;
  margin-right: 18px;
  font-size: 12px;
  color: #666;
}

.jobInfo .basic p:nth-of-type(1) span:nth-child(1) {
  background: url("@/assets/img/home/basic-area-ico.png") no-repeat left 2px /
    13px;
}

.jobInfo .basic p:nth-of-type(1) span:nth-child(2) {
  background: url("@/assets/img/home/basic-edu-ico.png") no-repeat left 2px /
    13px;
}

.jobInfo .basic p:nth-of-type(1) span:nth-child(3) {
  background: url("@/assets/img/home/basic-exp-ico.png") no-repeat left 2px /
    13px;
}

.jobInfo .basic p:nth-of-type(1) span:nth-child(4) {
  background: url("@/assets/img/home/basic-nature-ico.png") no-repeat left 2px /
    13px;
}

.jobInfo .basic p:nth-of-type(2) {
  display: flex;
  justify-content: space-between;
}

.jobInfo .basic p:nth-of-type(2) span {
  font-size: 12px;
  color: #999;
}

.jobInfo .basic p:nth-of-type(2) span:nth-child(1)::before {
  content: "发布：";
}

.jobInfo .basic p:nth-of-type(2) span:nth-child(2)::before {
  content: "浏览：";
}

.jobInfo .basic p:nth-of-type(2) span:nth-child(2)::after {
  content: "次";
}

.jobInfo .weal {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 0.5px solid #e8e8e8;
}

.jobInfo .weal span {
  display: flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 3px;
  margin: 0 7px 7px 0;
  border: 0.5px solid rgba(5, 166, 240, 0.3);
  color: #05A6F0;
  font-size: 13px;
}

.jobInfo .describe {
  padding-bottom: 15px;
}

.jobInfo .describe span {
  font-size: 14px;
  color: #333;
  line-height: 24px;
	white-space: pre-wrap;
}

/* 公司信息 */
.jobInfo .company {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 54px;
  padding: 15px 15px 20px 66px;
  overflow: hidden;
}

.jobInfo .company::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  width: 9px;
  height: 9px;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  margin-top: -4px;
  transform: rotate(45deg);
}

.jobInfo .company img {
  position: absolute;
  top: 15px;
  left: 0;
  width: 54px;
  height: 54px;
  border-radius: 5px;
}

.jobInfo .company p {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.jobInfo .company p + p {
  padding: 4px 0;
}

.jobInfo .company p b {
  font-size: 18px;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.jobInfo .company p em {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 28px;
  padding: 1px 0;
  border-radius: 3px;
  margin-left: 5px;
  background-color: #fef3e3;
  font-size: 10px;
  font-style: normal;
  color: #f39b13;
  white-space: nowrap;
}

.jobInfo .company p span {
  font-size: 12px;
  color: #999;
}

.jobInfo .company p i {
  width: 1px;
  height: 12px;
  margin: 0 8px;
  background-color: #ddd;
}

.jobInfo .company-quiz {
  display: flex;
  margin: 15px 0;
}

.jobInfo .company-quiz a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 38px;
  border: 1px solid rgba(255, 119, 0, 0.3);
  border-radius: 20px;
  background-color: rgba(255, 119, 0, 0.05);
  font-size: 16px;
  color: #05a6f0;
}

/* 问企业 */
.jobInfo .quiz {
  display: flex;
  flex-direction: column;
}

.jobInfo .quiz .btn {
  display: flex;
  margin: 15px 0;
}

.jobInfo .quiz .btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 38px;
  border: 1px solid rgba(255, 119, 0, 0.3);
  border-radius: 20px;
  background-color: rgba(255, 119, 0, 0.05);
  font-size: 16px;
  color: #05A6F0;
}

.jobInfo .quiz .item {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

.jobInfo .quiz .item span:nth-child(1),
.jobInfo .quiz .item span:nth-child(2) {
  padding-left: 28px;
  font-size: 15px;
}

.jobInfo .quiz .item span:nth-child(1) {
  background: url("@/assets/img/home/question-ico.png") no-repeat left 2px /
    20px;
  font-weight: 500;
  color: #333;
}

.jobInfo .quiz .item span:nth-child(2) {
  margin: 8px 0;
  background: url("@/assets/img/home/answer-ico.png") no-repeat left 2px / 20px;
  color: #666;
}

.jobInfo .quiz .item span:nth-child(3) {
  padding-left: 28px;
  font-size: 13px;
  color: #bbb;
}

/* 相似职位 */
.jobInfo .similar {
  display: flex;
  flex-direction: column;
  padding-bottom: 60.5px;
}

.jobInfo .similar .btn {
  display: flex;
  margin: 15px 0;
}

.jobInfo .similar .btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 38px;
  border: 1px solid rgba(5, 166, 240, 0.3);
  border-radius: 20px;
  background-color: rgba(5, 166, 240, 0.05);
  font-size: 16px;
  color: #05A6F0;
}

.jobInfo .similar .item {
  display: flex;
  flex-direction: column;
  padding: 15px 0;
}

.jobInfo .similar .item + .item {
  border-top: 1px dashed #f2f2f2;
}

.jobInfo .similar .item p {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.jobInfo .similar .item p + p {
  margin-top: 8px;
}

.jobInfo .similar .item p:nth-child(1) {
  justify-content: space-between;
  font-size: 17px;
}

.jobInfo .similar .item p:nth-child(1) b:nth-child(1) {
  display: -webkit-box;
  flex: 1;
  color: #333;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.jobInfo .similar .item p:nth-child(1) b:nth-child(2) {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 90px;
  color: #f44;
}

.jobInfo .similar .item p:nth-child(2) span,
.jobInfo .similar .item p:nth-child(3) span {
  font-size: 13px;
  color: #888;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.jobInfo .similar .item p:nth-child(3) span + span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 26px;
  border-radius: 3px;
  margin-left: 5px;
  background-color: #fef3e3;
  font-size: 10px;
  font-style: normal;
  color: #f39b13;
  white-space: nowrap;
}
</style>
